{% extends 'base.html' %}

{% block title %}
详情
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{% static 'highlight/styles/default.min.css' %}">
    <script src="{% static 'highlight/highlight.min.js' %}"></script>
{% endblock %}

{% block main %}
    <h1>{{ blog.title }}</h1>
    <hr>
    <div class="mt-2">
        <img src="{% static 'image/moyu.jpg' %}" class="rounded-circle" height="35">
        <span class="ms-2">{{ blog.author.username }}</span>
        <span class="ms-2">于</span>
        <span class="ms-2">{{ blog.pub_time|date:"Y年m月d日 h时i分s秒" }}</span>发布
        <hr>
        <div class="py-2">
            {{ blog.content|safe }}
        </div>
        <hr>
        <div class="mt-2">
            <h3>评论 ({{ blog.comments.all | length }}) :</h3>
            <form action="{% url 'blog:pub_comment' %}" method="POST">
                {% csrf_token %}
                <input type="hidden" value="{{ blog.id }}" name="blog_id">

                <div class="mt-2">
                    <input type="text" class="form-control" placeholder="请输入评论" name="content">
                </div>

                <div class="text-end mt-2">
                    <button type="submit" class="btn btn-primary">评论</button>
                </div>

            </form>
        </div>
        <div class="mt-2">
            <ul class="list-group list-group-flush">
                {% for comment in blog.comments.all %}
                    <li class="list-group-item mb-3">
                        <div class="d-flex justify-content-between text-body-secondary">
                            <div class="user-info">
                                <img src="{% static 'image/moyu.jpg' %}" class="rounded-circle" height="35">
                                <span class="ms-2">{{ comment.author.username }}</span>
                            </div>
                            <div class="create-time" style="line-height: 35px;">
                                {{ comment.pub_time|date:"Y年m月d日 h时i分s秒" }}
                            </div>
                        </div>
                        <div class="mt-2">{{ comment.content }}</div>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <script>
    hljs.highlightAll();
    </script>
{% endblock %}